iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 3
0
Modern Web

React鐵人先爆了再說系列 第 3

[03] 第一個 React 程式

  • 分享至 

  • xImage
  •  

Hello World!

沒錯! 說到學習新的程式碼的時候,當然要來個最經典的 HelloWorld! 做為學習的開端。

首先在左側區域新增一個檔案,檔案名稱直接輸入 HelloWorld.js ,就會直接生成一個JS檔案
( Visual Studio Code真方便 )

然後開啟 HolleWorld.js 輸入以下的內容:

import React, { Component } from 'react'

class HelloWorld extends Component {
    render() {

        let name = 'Hello World !'

        return <h1>{ name }</h1>
    
    }
}

export default HelloWorld

這裡建立了一個名為 HelloWorld 的元件,宣告name並放進HTML中的<h1>標記裡面,這種把HTML跟JavaScript程式碼混在一起來寫的方式,稱之為JSX語法,大括號{}裡面就是標明JavaScript的程式碼。

接著打開左側原本就有的 App.js ,把原始的程式碼清空之後,輸入:

import React, {Component} from 'react'
import HelloWorld from './HelloWorld'

class App extends Component {
  render() {
    return (
    
      <HelloWorld/>
      
    );
  }
}

export default App

這邊就是引用前面的 HelloWorld 元件,於是HTML顯示內容就是:

<h1>{ name }</h1>

最後的輸出內容就變成:

<h1>Hello World !</h1>

執行之後成功顯示出來:

React的第一個程式碼就完成了!


參考資訊來源:

  1. React - DOM界的彼方(繁中)

上一篇
[02] 開發環境建置
下一篇
[04] TextInput使用
系列文
React鐵人先爆了再說8
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言